<template>
  <div>
    <!-- 添加店员 -->
    <!-- 面包屑导航 -->
    <Crumbs></Crumbs>
    <div class="admin-box">
      <el-form status-icon ref="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="店员" prop="clerk">
          <el-input type="text" v-model="clerk" placeholder="请输入店员"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="rolename">
          <el-input type="text" v-model="rolename" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="所属门店">
          <el-input type="text" v-model="store" placeholder="选择门店" style="width: 70%"></el-input>
          <el-button @click="dialogVisible = true">选择门店</el-button>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="state">
            <el-radio label="启用"></el-radio>
            <el-radio label="禁用"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="form-btn" @click="open">保存</el-button>
        </el-form-item>
      </el-form>

      <!-- 选择门店 -->

      <el-dialog title="选择门店" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <SelectStore @choosep="choosep" @choicep="choicep"></SelectStore>
      </el-dialog>
    </div>
  </div>
</template>
<script>
// import { getXaddclerkAdmin} from '../../../api'
import Crumbs from '../Crumbs.vue'
import SelectStore from './SelectStore.vue'
export default {
  data() {
    return {
      region: '',
      dialogVisible: false,
      clerk: '',
      rolename: '',
      store: '',
      state: '',
      resource: '',
      rules: {
        clerk: [
          { required: true, message: '请输入店员', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' },
        ],
        rolename: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    handleClose(done) {
      done()
    },
    //保存
    open() {
      const obj = {
        clerk: this.clerk,
        rolename: this.rolename,
        store: this.store,
        state: this.state,
      }
      if (this.clerk == '' || this.rolename == '' || this.store == '' || this.state == '') {
        this.$alert('信息不可为空', '提示', {
          confirmButtonText: '确定',
          callback: (action) => {
            this.$message({
              type: 'info',
              message: `action: ${action}`,
            })
          },
        })
      } else {
        // getXaddclerkAdmin(obj).then((res) => {
        //   console.log(res)
        // })
        this.$router.push('/clerkAdmin')
      }
    },
    choosep(res) {
      console.log(res)
      this.dialogVisible = res.flage
      this.store = res.title
    },
    choicep(res) {
      console.log(res)
      this.dialogVisible = res.flage
      this.store = res.title
    },
  },
  components: { Crumbs, SelectStore },
}
</script>
<style lang="scss" scoped>
.admin-box {
  width: 100%;
  .demo-ruleForm {
    width: 500px;
  }
  .form-btn {
    margin: 0 auto;
  }
}
</style>
